<template>
  <view class="dy-scroll-container">
    <dy-navbar title="骨架屏" />
    <scroll-view class="dy-scroll dy-skeleton" scroll-y>
      <view class="dy-content">
        <view class="userinfo">
          <dy-img
            class="dy-skeleton-round dy-mg-bottom-32"
            width="100%"
            mode="widthFix"
            :src="userInfo.avatarUrl"
          />
        </view>
        <view class="dy-mg-top-32">
          <view v-for="(item, index) in lists" :key="index" class="dy-skeleton-rect lists">
            <view class=" dy-mg-bottom-12">{{ item }}</view>
          </view>
        </view>
      </view>
      <dy-skeleton v-model="loading" />
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'Skeleton',
  data() {
    return {
      userInfo: {
        avatarUrl: require('../../../../static/img/896a48d8-705d-4b7f-820e-178be243a91a.png')
      },
      lists: [
        '自主技术融合智慧云服务，为企业提供领先的技术方案',
        '深入理解中小企业数字化难题',
        '数十个成功案例的高效实践，为企业实现客户、渠道、销售和员工的全面在线化，发掘商业新机遇'
      ],
      loading: false // 是否显示骨架屏组件
    }
  },
  mounted() {
    // 模拟数据加载
    this.loading = true
    setTimeout(() => {
      this.loading = false
    }, 2000)
  }
}
</script>
